<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @before-close="handleCancel"
    @cancel="handleCancel"
  >
    <div class="content" :style="{ height: height }">
      <div ref="content-box" class="content-box">
        <div ref="data-fields" class="data-fields">
          <h2 class="title">数据字段明细</h2>
          <div ref="data-chart" class="data-chart">
            <columns
              :field-list="fieldList"
              :columns="columns"
              :data-id="getDataId()"
              :table-name="getTableName(true)"
              @activecolumn="activeColumn"
              @togglefield="toggleField"
            ></columns>
          </div>
        </div>
        <div class="split-control" @mousedown="onSplitMouseDown"></div>
        <div ref="controller-setting" class="controller-setting">
          <a-tabs
            v-show="fieldList && fieldList.length > 0"
            v-model="currentField"
          >
            <template v-if="fieldList && fieldList.length > 0">
              <a-tab-pane v-for="(item, i) in fieldList" :key="i">
                <div
                  :key="i"
                  slot="tab"
                  class="tab-title-real"
                  @mousedown="
                    (event) => {
                      tabTitleMouseDown(event, item, i)
                    }
                  "
                  @click.stop="tabTitleClicked(item, i)"
                >
                  <span class="warning-box">
                    <a-tooltip
                      v-if="
                        item.formConfig.formData.associationChart.length === 0
                      "
                    >
                      <template slot="title"
                        >请选择至少1个关联组件或图表</template
                      >
                      <a-icon type="exclamation-circle" />
                    </a-tooltip>
                  </span>
                  {{ item.label }}
                  <svg
                    v-if="i === currentField"
                    class="before"
                    width="8"
                    height="8"
                  >
                    <path d="M 8,0 L 8,8 L 0,8 A 8,8 -90, 0,0 8,0" />
                  </svg>
                  <svg
                    v-if="i === currentField"
                    class="after"
                    width="8"
                    height="8"
                  >
                    <path d="M 0,0 A 8,8 -90, 0,0 8,8 L0, 8, L0,0" />
                  </svg>
                </div>
                <div :ref="`scrollbox${i}`" class="scroll-box">
                  <div class="setting-box">
                    <div class="control-select-box">
                      <Hform
                        v-bind="item.formConfig"
                        :label-col="8"
                        :wrapper-col="16"
                        @change="
                          (val, key, item) => {
                            onOptionSettingChanged(val, key, item, i)
                          }
                        "
                        @blur="
                          (key, item) => {
                            onOptionSettingBlur(key, item, i)
                          }
                        "
                      ></Hform>
                    </div>
                    <div
                      v-if="
                        item.formConfig.formData.controlType !== 'timePicker' &&
                        item.formConfig.formData.isRemote !== '1'
                      "
                      class="option-box"
                    >
                      <div class="option-list">
                        <div class="option-item editor" @click="editOption(i)">
                          <a-icon type="plus" />&nbsp;编辑选项
                        </div>
                        <div
                          v-for="(option, j) in item.options"
                          :key="`${i}-${j}`"
                          class="option-item"
                          @click="optionClick(i, option)"
                        >
                          <a-tooltip placement="top">
                            <template slot="title">
                              <span>{{
                                item.formConfig.formData.defaultValue.includes(
                                  option.value
                                )
                                  ? '默认选中已开启'
                                  : '默认选中已关闭'
                              }}</span>
                            </template>
                            <span
                              v-if="
                                item.formConfig.formData.radioOrCheckbox ===
                                  'radio' ||
                                item.formConfig.formData.controlType ===
                                  'select'
                              "
                              class="ant-radio"
                              :class="
                                item.formConfig.formData.defaultValue.includes(
                                  option.value
                                )
                                  ? 'ant-radio-checked'
                                  : ''
                              "
                            >
                              <span class="ant-radio-inner"></span>
                            </span>
                            <span
                              v-else
                              class="ant-checkbox"
                              :class="
                                item.formConfig.formData.defaultValue.includes(
                                  option.value
                                )
                                  ? 'ant-checkbox-checked'
                                  : ''
                              "
                            >
                              <span class="ant-checkbox-inner"></span>
                            </span>
                          </a-tooltip>
                          <span class="label-text" :title="option.label">{{
                            option.label
                          }}</span>
                          <span
                            class="icon-del"
                            @click.stop="deleteOption(option, i, j)"
                          >
                            <a-icon type="close" />
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div ref="association-chart" class="association-chart">
                    <h2 class="title">
                      关联图表
                      <span class="sub"
                        >为您检测到绑定<span class="data-name">{{
                          (getTableName(true) || '表')
                            .replace('dataset."', '')
                            .replace('"', '')
                        }}</span
                        >的图表</span
                      >
                    </h2>
                    <p class="select-all">
                      <label
                        class="ant-checkbox-wrapper"
                        :class="{
                          'ant-checkbox-wrapper-disabled':
                            sameBindGridItems.length === 1,
                        }"
                      >
                        <span
                          class="ant-checkbox"
                          :class="{
                            'ant-checkbox-disabled':
                              sameBindGridItems.length === 1,
                            'ant-checkbox-checked':
                              item.formConfig.formData.associationChart
                                .length === sameBindGridItems.length &&
                              item.formConfig.formData.associationChart.length >
                                0,
                          }"
                          @click="
                            toggleSelectAll(
                              item,
                              item.formConfig.formData.associationChart
                                .length === sameBindGridItems.length &&
                                item.formConfig.formData.associationChart
                                  .length > 0
                            )
                          "
                        >
                          <span class="ant-checkbox-inner"></span>
                        </span>
                        全选
                      </label>
                    </p>
                    <div v-if="i === currentField" class="chart-list">
                      <div
                        v-for="(chart, k) in sameBindGridItems"
                        :key="k"
                        class="a-chart-box"
                        :class="{
                          'is-table': chart.chartType === 'table',
                        }"
                        :style="{
                          width: `${chart.chartOptions.size[0]}px`,
                          height: `${chart.chartOptions.size[1] + 20}px`,
                          'margin-right': `${
                            (k + 1) % itemColumnNumber === 0 ? 0 : itemMargin
                          }px`,
                        }"
                      >
                        <h3 class="title" @click="toggleChart(chart, item)">
                          <span
                            class="ant-checkbox"
                            :class="{
                              'ant-checkbox-checked':
                                item.formConfig.formData.associationChart &&
                                item.formConfig.formData.associationChart.includes(
                                  chart.i
                                ),
                            }"
                          >
                            <span class="ant-checkbox-inner"></span>
                          </span>
                          {{
                            chart.chartOptions.title
                              ? chart.chartOptions.title
                              : `未命名组件${k + 1}`
                          }}
                        </h3>
                        <Chart
                          v-if="chart.chartType !== 'table'"
                          :config="chart.chartOptions"
                          :chart-type="chart.chartType"
                        ></Chart>
                        <pageTableVue
                          v-else
                          class="table-setting-view"
                          :config="chart"
                          :no-page="true"
                        >
                        </pageTableVue>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="handler">
                  <span @click="toggleOpenAdvancedSetting"
                    >{{ item.openAdvancedSetting ? '收起' : '展开' }}
                    <a-icon :type="item.openAdvancedSetting ? 'up' : 'down'" />
                  </span>
                </div>
              </a-tab-pane>
            </template>
          </a-tabs>
          <!-- 未选择字段直接暂时以下空状态 -->
          <a-tabs
            v-show="!fieldList || fieldList.length == 0"
            key="else"
            v-model="noField"
            type="card"
          >
            <a-tab-pane :key="noField">
              <div slot="tab" class="tab-title-real">
                未选字段
                <svg class="before" width="8" height="8">
                  <path d="M 8,0 L 8,8 L 0,8 A 8,8 -90, 0,0 8,0" />
                </svg>
                <svg class="after" width="8" height="8">
                  <path d="M 0,0 A 8,8 -90, 0,0 8,8 L0, 8, L0,0" />
                </svg>
              </div>
              <div class="setting-box">
                <div class="control-select-box">
                  <div class="nofield">
                    <img
                      class="nofield-img"
                      src="~@/assets/vis-controller/nofield.png"
                    />
                    <span class="nofield-text">暂无选择字段</span>
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
      <dialogOptionsSetting
        ref="dialog-option-setting"
        v-bind="dialogOptionsSettingConfig"
        :field-info="fieldList[currentField]"
        @search-option="searchOption"
        @onaddmorclick="onClickAddMore"
        @handle="onDialogOptionsSettingHandle"
      ></dialogOptionsSetting>
    </div>
    <div slot="footer" class="flr">
      <slot name="footer">
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk">确定</a-button>
      </slot>
    </div>
  </a-modal>
</template>
<script lang="ts">
// import { queryDatasetById } from '@/api/data'
import {
  tcolumnQueryDetail,
  tcolumnQueryMinMax,
  tcolumnQueryValuesByPage,
} from '@/api/visualization'
import { cloneDeep } from 'lodash'
import Vue from 'vue'
import visualization from '@/store/modules/visualization'
import Chart from '@/components/chart/chart.vue'
import Hform from '../form/h-form.vue'
import KV from '../form/kv'
import {
  KeyValueStore,
  ColumnInterface,
  controlTypeEnum,
  controlLayoutEnum,
  componentTypeEnum,
  GridItemDataInterface,
} from '../vueGridLayout/interfate/grid-Item-data-inteface'
import dialogOptionsSetting from './dialog-options-setting.vue'
import { getFormSettingByComponent } from './controller-setting'
import pageTableVue from '../pageTable/pageTable.vue'
import columns from './columns.vue'

export default Vue.extend({
  components: {
    Hform,
    dialogOptionsSetting,
    Chart,
    pageTableVue,
    columns,
  },
  props: {
    // 样式布局
    layout: {
      type: String,
      default() {
        return controlLayoutEnum.vertical
      },
    },
    from: {
      type: Object,
      default() {
        return null
      },
    },
    height: {
      type: String,
      default() {
        return '400px'
      },
    },
    width: {
      type: String,
      default() {
        return '400px'
      },
    },
    title: {
      type: String,
      default() {
        return ''
      },
    },
    confirmLoading: {
      type: Boolean,
      default() {
        return false
      },
    },
    visible: {
      type: Boolean,
      default() {
        return false
      },
    },
    gridItem: {
      type: Object,
      default() {
        return null
      },
    },
  },
  data() {
    const DefaultData: KeyValueStore = {
      loadingCount: 0,
      itemMargin: 0,
      itemColumnNumber: 3,
      itemWidth: 0,
      dialogOptionsSettingConfig: {
        visible: false,
        title: '选项配置',
        width: '450px',
        height: 'calc(80vh - 160px)',
        fieldName: '',
        tableName: '',
      },
      noField: 'noField',
      fieldList: [],
      columns: [],
      currentField: 0,
      editGridItem: null,
      boxWidth: 0,
      fieldConfigDisabled: true,
    }

    return DefaultData
  },
  computed: {
    sameBindGridItems() {
      const that = this as any
      const gridItems = visualization.gridList.filter(
        (item) =>
          item.formData &&
          item.chartOptions &&
          item.chartOptions.value &&
          item.chartOptions.value.length > 0 &&
          item.formData.dataId === this.gridItem.formData.dataId
      )
      const width = Math.max(304, that.itemWidth)
      const height = (width * 188) / 304

      return cloneDeep(gridItems).map((gridItem) => {
        gridItem.chartOptions = {
          ...gridItem.chartOptions,
          size: [width, height],
          labelIsShow: false,
          legendIsShow: false,
          padding: [5, 10, 10, 0],
          titleIsShow: false,
          yAxisTitleFontSize: 12,
          xAxisTitleFontSize: 12,
          axisTitleIsShow: false,
          xAxisRenderMode: 'simple',
          yAxisRenderMode: 'simple',
        }
        return gridItem
      })
    },
  },
  watch: {
    fieldList: {
      immediate: true,
      deep: true,
      handler() {
        const that = this as any
        if (that.fieldList.length === 0) {
          that.fieldConfigDisabled = true
        } else {
          const enable = that.fieldList.every((item: KeyValueStore) => {
            return (
              item.formConfig &&
              item.formConfig.formData &&
              item.formConfig.formData.associationChart &&
              item.formConfig.formData.associationChart.length > 0
            )
          })
          that.fieldConfigDisabled = !enable
        }
      },
    },
  },
  mounted() {
    const that = this as any
    setTimeout(() => {
      const resize = () => {
        that.itemWidth = that.getItemWidth()
      }
      resize()
      const win = window as any
      if (win) {
        win.addEventListener('resize', resize)
      }

      this.$once('hook:beforeDestroy', () => {
        win.removeEventListener('resize', resize)
      })
    }, 200)
  },
  methods: {
    getItemWidth(): number {
      const that = this as any
      let result = 304
      const contentElement = this.$refs['content-box'] as HTMLElement
      if (contentElement) {
        const offsetWidth = contentElement.offsetWidth as number
        result = ((offsetWidth - 56) * 0.96) / 3
        that.itemColumnNumber = 3
        that.itemMargin = (offsetWidth - 60 - result * 3) / 2
        if (result < 304) {
          result = ((offsetWidth - 36) * 0.96) / 2
          that.itemColumnNumber = 2
          that.itemMargin = offsetWidth - 56 - result * 2
        }
      }

      return result
    },
    toggleSelectAll(item: KV, isSelect: boolean) {
      const that = this as any
      if (that.sameBindGridItems.length === 1) {
        return
      }
      if (isSelect) {
        this.$set(item.formConfig.formData, 'associationChart', [])
      } else {
        const associationChart = [] as Array<string>
        ;(this as any).sameBindGridItems.forEach((gridItem: KV) => {
          associationChart.push(gridItem.i)
        })
        this.$set(
          item.formConfig.formData,
          'associationChart',
          associationChart
        )
      }
    },
    toggleChart(chart: GridItemDataInterface, item: KeyValueStore) {
      const that = this as any
      if (item.formConfig.formData.associationChart.includes(chart.i)) {
        if (item.formConfig.formData.associationChart.length === 1) {
          this.$message.error('每个控件至少需要关联一张图表')
        } else {
          that.$set(
            item.formConfig.formData,
            'associationChart',
            item.formConfig.formData.associationChart.filter(
              (chartId: string) => chartId !== chart.i
            )
          )
        }
      } else {
        item.formConfig.formData.associationChart.push(chart.i)
      }
    },
    tabTitleMouseDown(event: MouseEvent, item: any, i: number) {
      const that = this as any
      const element = (event.target as HTMLElement).parentNode
      const tabs = element?.parentElement?.childNodes
      const arrayPositionX: Array<[number, number]> = []
      tabs?.forEach((node) => {
        const rect = (node as HTMLElement).getBoundingClientRect()
        arrayPositionX.push([rect.left, rect.left + rect.width])
      })
      // const startTime = new Date().getTime()
      const startPointX = event.screenX as number
      let currentX = 0
      const document = (window as any).document as any
      const mousemove = function (eventMouseMove: MouseEvent) {
        currentX = eventMouseMove.screenX
        if (element) {
          ;(element as HTMLElement).style.transform = `translateX(${
            currentX - startPointX
          }px)`
        }
      }
      document.addEventListener('mousemove', mousemove)

      const mouseup = function (eventMouseUp: MouseEvent) {
        document.removeEventListener('mousemove', mousemove)
        document.removeEventListener('mouseup', mouseup)
        currentX = eventMouseUp.screenX
        let indexNew: number = i
        if (currentX <= arrayPositionX[0][0]) {
          indexNew = 0
        } else if (currentX >= arrayPositionX[arrayPositionX.length - 1][1]) {
          indexNew = arrayPositionX.length - 1
        } else {
          for (let index = 0; index < arrayPositionX.length - 1; index += 1) {
            if (
              currentX >= arrayPositionX[index][0] &&
              currentX <= arrayPositionX[index][1]
            ) {
              indexNew = index
            }
          }
        }
        if (indexNew !== i) {
          const tabsInfo: Array<KV> = cloneDeep(that.fieldList)
          const tabOld = tabsInfo[i] as KV

          tabsInfo.splice(i, 1)
          tabsInfo.splice(indexNew, 0, tabOld)
          that.fieldList = tabsInfo
          setTimeout(() => {
            that.tabTitleClicked(that.fieldList[indexNew], indexNew)
          }, 100)
        }
        if (element) {
          ;(element as HTMLElement).style.transform = 'translateX(0px)'
        }
      }
      document.addEventListener('mouseup', mouseup)
    },
    setEditGridItem(item: any) {
      const that = this as any
      that.editGridItem = item
    },
    clear() {
      const that = this as any
      that.fieldList = [] as Array<KV>
      that.columns = [] as Array<KV>
      that.currentField = 0
    },
    setTabsInfo(tabsInfo: Array<KeyValueStore>, currentTab: number) {
      const that = this as any
      that.fieldList = tabsInfo
      that.currentField = currentTab
      that.fieldList.forEach((objectItem: KV) => {
        const column = objectItem.column as ColumnInterface
        if (column.isDate || column.isNumber) {
          that.getNumberOrDateOption(column, objectItem, false, true)
        } else {
          that.getColumnOptions(column, objectItem, true, true)
        }
      })
    },
    onClickAddMore() {
      const that = this as any
      const fieldInfo = that.fieldList[that.currentField]
      if (fieldInfo.isDate || fieldInfo.isNumber || fieldInfo.isLoading) {
        return
      }

      that.$set(fieldInfo, 'currentPage', fieldInfo.currentPage + 1)
      that.getColumnOptions(fieldInfo, fieldInfo, false)
    },
    syncTableInfo() {
      const that = this as any
      const dataId = that.getDataId()
      const tableName = that.getTableName(true)
      if (dataId) {
        that.loadingCount += 1
        tcolumnQueryDetail({
          data: {
            curPage: 1,
            dataId,
            filter: [],
            mode: 50,
            name: '_record_id_',
            pageSize: 50,
            table: tableName,
          },
        })
          .then((response: any) => {
            that.loadingCount -= 1
            if (response.data.code === 100) {
              const fields: any = []
              if (
                response.data.result.head &&
                Array.isArray(response.data.result.head) &&
                response.data.result.head.length > 0
              ) {
                response.data.result.head.forEach((head: KeyValueStore) => {
                  fields.push({
                    tableId: dataId,
                    label: head.name,
                    value: head.name,
                    type_: head.type,
                    type: head.desc,
                    isDate: (head.desc as string) === 'date',
                    isNumber: [
                      'smallint',
                      'integer',
                      'bigint',
                      'numberic',
                      'real',
                      'double precision',
                      'serial',
                      'bigserial',
                      'decimal',
                      'int',
                      '',
                    ].includes(head.desc),
                  })
                })
              }
              that.columns = fields
            }
          })
          .catch(() => {
            that.loadingCount -= 1
          })
        // queryDatasetById({
        //   data: {
        //     id: dataId
        //   }
        // }).then((response:any) =>{
        //   that.loadingCount -= 1
        //   if(response.data.code === 100){
        //     const fields:any = []
        //     if(response.data.result.head && Array.isArray(response.data.result.head) && (response.data.result.head.length > 0)){
        //       response.data.result.head.forEach((head:KeyValueStore) => {
        //         fields.push({
        //           tableId: dataId,
        //           label: head.name,
        //           value: head.name,
        //           type: head.type,
        //           isDate: (head.type as string) === 'date',
        //           isNumber: ['smallint', 'integer', 'bigint', 'numberic', 'real', 'double precision','serial', 'bigserial','decimal', 'int', ''].includes(head.type),
        //         })
        //       })
        //     }
        //     that.columns = fields
        //   }
        // }).catch(()=>{
        //    that.loadingCount -= 1
        // })
      }
    },
    getTableName(isReal?: boolean) {
      if (this.gridItem && this.gridItem.formData) {
        return isReal
          ? this.gridItem.formData.tableNameReal
          : this.gridItem.formData.tableName
      }
      return ''
    },
    getDataId() {
      if (this.gridItem && this.gridItem.formData) {
        return this.gridItem.formData.dataId
      }
      return ''
    },
    toggleOpenAdvancedSetting() {
      const that = this as any
      if (that.fieldList && that.fieldList.length > 0) {
        const statusNew = !that.fieldList[0].openAdvancedSetting
        that.fieldList.forEach((field: KeyValueStore, fieldIndex: number) => {
          this.$set(
            that.fieldList[fieldIndex],
            'openAdvancedSetting',
            statusNew
          )
        })
        const contentBox = this.$refs['content-box'] as HTMLElement
        const dataFieldsBox = that.$refs['data-fields'] as HTMLElement
        const controllerSettingBox = that.$refs[
          'controller-setting'
        ] as HTMLElement
        const contentBoxHeight = (contentBox as HTMLElement).offsetHeight
        const maxDataFieldsHeight = Math.round((306 / contentBoxHeight) * 100)

        dataFieldsBox.classList.add('transition')
        controllerSettingBox.classList.add('transition')
        if (statusNew) {
          // 必须介于20% - 80* 之间
          let percent = 60
          percent = Math.min(60, percent)
          percent = Math.max(40, percent)
          const setPercent =
            maxDataFieldsHeight && percent > maxDataFieldsHeight
              ? maxDataFieldsHeight
              : percent
          dataFieldsBox.style.height = `${setPercent}%`
          controllerSettingBox.style.height = `${100 - setPercent}%`
          // dataFieldsBox.style.height = '20%'
          // controllerSettingBox.style.height = '80%'
        } else {
          // 必须介于20% - 80* 之间
          let percent = Math.round((120 / contentBoxHeight) * 100)
          percent = Math.min(80, percent)
          percent = Math.max(20, percent)
          const setPercent =
            maxDataFieldsHeight && percent > maxDataFieldsHeight
              ? maxDataFieldsHeight
              : percent
          dataFieldsBox.style.height = `${setPercent}%`
          controllerSettingBox.style.height = `${100 - setPercent}%`
          // dataFieldsBox.style.height = '60%'
          // controllerSettingBox.style.height = '40%'
        }
        setTimeout(() => {
          dataFieldsBox.classList.remove('transition')
          controllerSettingBox.classList.remove('transition')
        }, 300)
      }
    },
    activeColumn(column: ColumnInterface) {
      const that = this as any
      const index = that.fieldList.findIndex((fieldInfo: KV) => {
        return fieldInfo.column.label === column.label
      })
      if (index >= 0) {
        that.currentField = index
      }
    },
    toggleField(column: ColumnInterface) {
      const that = this as any
      let findIndex: number = -1
      const find = that.fieldList.find((item: KeyValueStore, index: number) => {
        if (item.label === column.label) {
          findIndex = index
          return true
        }
        return false
      })
      if (find) {
        that.fieldList.splice(findIndex, 1)
        if (that.fieldList.length > 0) {
          if (that.fieldList[findIndex - 1]) {
            that.tabTitleClicked(that.fieldList[findIndex - 1], findIndex - 1)
          } else {
            that.tabTitleClicked(that.fieldList[0], 0)
          }
        } else {
          that.currentField = 0
        }
      } else {
        that.createControl(column)
      }
    },
    getFormSetting(column: ColumnInterface): KeyValueStore {
      let componentName: componentTypeEnum
      if (column.isDate) {
        componentName = componentTypeEnum.rangeDay
      } else {
        componentName = componentTypeEnum.radio
      }
      return getFormSettingByComponent(componentName)
    },
    /**
     * 初始化选项
     */
    createControl(column: ColumnInterface) {
      const that = this as any
      // 当前为模拟
      const objectItem: KeyValueStore = {
        ...column,
        column, // 用于反向转换
        formConfig: that.getFormSetting(column),
        openAdvancedSetting: false,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        optionsAll: [],
        options: [],
      }
      objectItem.formConfig.formData.name = that.getDefaultName()
      objectItem.formConfig.formData.componentId = that.gridItem.i
      if (column.isDate || column.isNumber) {
        if (column.isDate) {
          objectItem.formConfig.formData.controlType =
            controlTypeEnum.timePicker
          objectItem.formConfig.formData.timeRangeYear = []
          objectItem.formConfig.formData.options = []
          objectItem.formConfig.formData.timeRangeMonth = []
          objectItem.formConfig.formData.timeRangeDate = []
        }
        that.getNumberOrDateOption(column, objectItem, true, false)
      } else {
        that.getColumnOptions(column, objectItem, true)
      }
    },
    getDefaultName() {
      const that = this as any
      let result = ''
      const nameAll = that.fieldList.reduce(
        (rec: Array<string> = [], item: any) => {
          rec.push(item.formConfig.formData.name || '')
          return rec
        },
        []
      )
      for (let i = 1; i < 5000; i += 1) {
        const name = `控件${i}`
        if (!nameAll.includes(name)) {
          result = name
          break
        }
      }
      return result
    },
    getNumberOrDateOption(
      column: ColumnInterface,
      objectItem: KeyValueStore,
      isFirst?: boolean,
      isEdit?: boolean
    ) {
      const that = this as any
      const tableName = that.getTableName(true)
      if (tableName) {
        tcolumnQueryMinMax({
          data: {
            name: column.value,
            table: tableName,
          },
        }).then((response) => {
          if (response.data.code === 100) {
            const data = response.data.result as any
            // 如果是日期、数值则求最大最小值
            objectItem.options = [data.min, data.max]
            if (isFirst) {
              if (this.from && this.from.chartType !== 'filter') {
                if (
                  !objectItem.formConfig.formData.associationChart.includes(
                    this.from.i
                  )
                ) {
                  objectItem.formConfig.formData.associationChart.push(
                    this.from.i
                  )
                }
              }
              if (!isEdit) {
                const fieldList = that.fieldList as Array<KV>
                fieldList.push(objectItem)
                that.$set(that, 'fieldList', fieldList)
                that.currentField = that.fieldList.length - 1
              }
            }
          }
        })
      }
    },
    searchOption(keyWord: string) {
      const that = this as any
      const objectItem = that.fieldList[that.currentField]
      if (objectItem) {
        objectItem.currentPage = 1
        objectItem.pageSize = 50
        objectItem.optionsAll = []
        that.getColumnOptions(
          objectItem.column,
          objectItem,
          false,
          false,
          keyWord
        )
      }
    },
    getColumnOptions(
      column: ColumnInterface,
      objectItem: KeyValueStore,
      isFirst?: boolean,
      isEdit?: boolean,
      keyWord?: string
    ) {
      const that = this as any
      const tableName = that.getTableName(true)
      if (!tableName) {
        this.$message.error('参数错误，请刷新数据重试')
        return
      }
      if (objectItem.isLoading) {
        return
      }
      this.$set(objectItem, 'isLoading', true)
      tcolumnQueryValuesByPage({
        data: {
          curPage: (objectItem.currentPage as number) || 1,
          pageSize: objectItem.pageSize || 50,
          search: keyWord || '',
          table: tableName,
          name: column.value,
        },
      })
        .then((response) => {
          if (response.data.code === 100) {
            const data = response.data.result.data as Array<string>
            const options: Array<KV> = []
            data.forEach((value: string) => {
              options.push({
                label: value,
                value,
              })
            })
            objectItem.total = response.data.result.totalElements
            if (isFirst) {
              objectItem.optionsAll = options
              if (!isEdit) {
                that.fieldList.push(objectItem)
                that.currentField = that.fieldList.length - 1
                objectItem.options = cloneDeep(options)
                if (this.from && this.from.chartType !== 'filter') {
                  if (
                    !objectItem.formConfig.formData.associationChart.includes(
                      this.from.i
                    )
                  ) {
                    objectItem.formConfig.formData.associationChart.push(
                      this.from.i
                    )
                  }
                }
              }
            } else {
              // 添加到全部
              objectItem.optionsAll.push(...options)
            }
            this.$set(objectItem, 'isLoading', false)
          }
        })
        .catch(() => {
          this.$set(objectItem, 'isLoading', false)
        })
    },
    /**
     * 拖动改变高度分配比例
     */
    onSplitMouseDown(event: any) {
      const contentBox = this.$refs['content-box'] as HTMLElement
      const dataFieldsBox = this.$refs['data-fields'] as HTMLElement
      const controllerSettingBox = this.$refs[
        'controller-setting'
      ] as HTMLElement

      const contentBoxHeight = (contentBox as HTMLElement).offsetHeight
      const dataFieldsBoxHeight = (dataFieldsBox as HTMLElement).offsetHeight

      const maxDataFieldsHeight = Math.round((306 / contentBoxHeight) * 100)

      const screenY = event.screenY as number
      let screenYMove = screenY
      const documentGlobal = (window as any).document
      const mouseMove = function (eventMouseMove: any) {
        screenYMove = eventMouseMove.screenY as number
        let percent =
          Math.round(
            ((dataFieldsBoxHeight - (screenY - screenYMove)) /
              contentBoxHeight) *
              10000
          ) / 100
        // 必须介于20% - 80* 之间
        percent = Math.min(80, percent)
        percent = Math.max(20, percent)
        const setPercent =
          maxDataFieldsHeight && percent > maxDataFieldsHeight
            ? maxDataFieldsHeight
            : percent
        dataFieldsBox.style.height = `${setPercent}%`
        controllerSettingBox.style.height = `${100 - setPercent}%`
      }
      const mouseUp = function (eventMouseUp: any) {
        screenYMove = eventMouseUp.screenY as number
        documentGlobal.removeEventListener('mouseup', mouseUp)
        documentGlobal.removeEventListener('mousemove', mouseMove)
      }

      documentGlobal.addEventListener('mousemove', mouseMove)
      documentGlobal.addEventListener('mouseup', mouseUp)
    },
    /**
     * 选项设置回调
     */
    onDialogOptionsSettingHandle(data: KeyValueStore) {
      const that = this as any
      if (data.status) {
        that.fieldList[that.currentField].options = cloneDeep(data.options)
      }
      this.$set(that.dialogOptionsSettingConfig, 'visible', false)
    },
    /**
     * 编辑选项按钮点击
     */
    editOption(fieldIndex: number) {
      const that = this as any
      // this.$set(this.dialogOptionsSettingConfig, 'dataSource', cloneDeep(this.fieldList[fieldIndex].optionsAll))
      this.$set(
        that.dialogOptionsSettingConfig,
        'currentSavedOptions',
        cloneDeep(that.fieldList[fieldIndex].options)
      )
      this.$set(
        that.dialogOptionsSettingConfig,
        'fieldName',
        that.fieldList[fieldIndex].value
      )
      this.$set(
        that.dialogOptionsSettingConfig,
        'tableName',
        that.getTableName(true)
      )
      this.$set(that.dialogOptionsSettingConfig, 'visible', true)
      setTimeout(() => {
        ;(this.$refs['dialog-option-setting'] as any).syncSelectItems()
      }, 10)
    },
    /**
     * 删除某个选项
     */
    deleteOption(
      option: KeyValueStore,
      fieldIndex: number,
      optionIndex: number
    ) {
      const that = this as any
      that.fieldList[fieldIndex].options.splice(optionIndex, 1)
    },
    /**
     * 点击确定
     */
    handleOk() {
      //  :disabled="fieldConfigDisabled"
      const that = this as any
      if ((that.fieldList as Array<any>).length === 0) {
        this.$message.error('请先选择数据字段并配置控件')
        return
      }
      if (that.fieldConfigDisabled) {
        this.$message.error('请确保每个控件至少关联1个组件')
        return
      }
      that.fieldList.forEach((fieldInfo: KV, fieldIndex: number) => {
        if (
          ['', null, undefined].includes(
            that.fieldList[fieldIndex].formConfig.formData.name
          )
        ) {
          this.$set(
            that.fieldList[fieldIndex].formConfig.formData,
            'name',
            `控件${fieldIndex + 1}`
          )
        }
      })
      this.$emit('handle', {
        emitor: this,
        status: true,
        editGridItem: that.editGridItem,
        tableName: that.getTableName(true),
        dataId: that.getDataId(),
      })
    },

    /**
     * 点击取消
     */
    handleCancel() {
      const that = this as any
      that.fieldList = []
      this.$emit('handle', { emitor: this, status: false })
    },
    tabTitleClicked(item: KV, index: number) {
      const that = this as any
      that.currentField = index
      const columnIndex = that.columns.findIndex(
        (column: ColumnInterface) => column.label === item.label
      )
      if (columnIndex) {
        const dom = this.$refs['data-chart'] as HTMLElement
        if (dom) {
          dom.scrollTo(columnIndex * 200, 0)
        }
      }
    },
    onOptionSettingBlur(
      key: string,
      configItem: KeyValueStore,
      fieldIndex: number
    ) {
      const that = this as any
      if (
        configItem.name === 'name' &&
        that.fieldList[fieldIndex].formConfig.formData.name === ''
      ) {
        this.$set(
          that.fieldList[fieldIndex].formConfig.formData,
          'name',
          that.getDefaultName()
        )
      }
    },
    /**
     * 设置表单选项change事件回调
     */
    onOptionSettingChanged(
      value: string | number,
      key: string,
      configItem: KeyValueStore,
      fieldIndex: number
    ) {
      const that = this as any
      this.$set(that.fieldList[fieldIndex].formConfig.formData, 'options', [])
      const timeRangeYearIndex = that.fieldList[
        fieldIndex
      ].formConfig.items.findIndex(
        (item: KeyValueStore) => item.name === 'timeRangeYear'
      )
      const timeRangeMonthIndex = that.fieldList[
        fieldIndex
      ].formConfig.items.findIndex(
        (item: KeyValueStore) => item.name === 'timeRangeMonth'
      )
      const timeRangeDateIndex = that.fieldList[
        fieldIndex
      ].formConfig.items.findIndex(
        (item: KeyValueStore) => item.name === 'timeRangeDate'
      )
      const isRemoteIndex = that.fieldList[
        fieldIndex
      ].formConfig.items.findIndex(
        (item: KeyValueStore) => item.name === 'isRemote'
      )
      if (
        configItem.name === 'name' &&
        [null, undefined].includes(
          that.fieldList[fieldIndex].formConfig.formData.name as any
        )
      ) {
        this.$set(
          that.fieldList[fieldIndex].formConfig.formData,
          'name',
          that.getDefaultName()
        )
      }
      if (key === 'radioOrCheckbox') {
        this.$set(
          that.fieldList[fieldIndex].formConfig.formData,
          'defaultValue',
          []
        )
      }

      if (key === 'controlType') {
        const index = that.fieldList[fieldIndex].formConfig.items.findIndex(
          (item: KeyValueStore) => item.name === 'radioOrCheckbox'
        )
        const indexTimeAccuracy = that.fieldList[
          fieldIndex
        ].formConfig.items.findIndex(
          (item: KeyValueStore) => item.name === 'timeAccuracy'
        )
        this.$set(
          that.fieldList[fieldIndex].formConfig.formData,
          'defaultValue',
          []
        )
        switch (value) {
          case 'radioOrCheckbox':
            if (index >= 0) {
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[index],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[indexTimeAccuracy],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'radioOrCheckbox',
                'radio'
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[index],
                'isHide',
                false
              )

              this.$set(
                that.fieldList[fieldIndex].formConfig.items[isRemoteIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[indexTimeAccuracy],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeYearIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[
                  timeRangeMonthIndex
                ],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeDateIndex],
                'isHide',
                true
              )
            }
            break
          case 'select':
            if (index >= 0) {
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[index],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[indexTimeAccuracy],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[index],
                'isHide',
                true
              )

              this.$set(
                that.fieldList[fieldIndex].formConfig.items[indexTimeAccuracy],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[isRemoteIndex],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeYearIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[
                  timeRangeMonthIndex
                ],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeDateIndex],
                'isHide',
                true
              )
            }
            break
          case 'timePicker':
            if (index >= 0) {
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[index],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[indexTimeAccuracy],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeYearIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[
                  timeRangeMonthIndex
                ],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeDateIndex],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[isRemoteIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeYear',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeMonth',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeDate',
                []
              )
            }
            break
          default:
            break
        }
      }

      if (key === 'timeAccuracy') {
        switch (that.fieldList[fieldIndex].formConfig.formData[key]) {
          case 'y':
            if (timeRangeYearIndex >= 0) {
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeYearIndex],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[
                  timeRangeMonthIndex
                ],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeDateIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[isRemoteIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeYear',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeMonth',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeDate',
                []
              )
            }
            break
          case 'm':
            if (timeRangeMonthIndex >= 0) {
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeYearIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[
                  timeRangeMonthIndex
                ],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeDateIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[isRemoteIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeYear',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeMonth',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeDate',
                []
              )
            }
            break
          case 'd':
            if (timeRangeDateIndex >= 0) {
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeYearIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[
                  timeRangeMonthIndex
                ],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[timeRangeDateIndex],
                'isHide',
                false
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.items[isRemoteIndex],
                'isHide',
                true
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeYear',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeMonth',
                []
              )
              this.$set(
                that.fieldList[fieldIndex].formConfig.formData,
                'timeRangeDate',
                []
              )
            }
            break
          default:
            break
        }
      }
    },
    /**
     * 当选或复选选项点击
     */
    optionClick(tabIndex: number, option: KeyValueStore) {
      const that = this as any
      if (
        that.fieldList[tabIndex].formConfig.formData.defaultValue.includes(
          option.value
        )
      ) {
        if (
          that.fieldList[tabIndex].formConfig.formData.radioOrCheckbox ===
            'radio' ||
          that.fieldList[tabIndex].formConfig.formData.controlType === 'select'
        ) {
          this.$set(
            that.fieldList[tabIndex].formConfig.formData,
            'defaultValue',
            []
          )
        } else {
          this.$set(
            that.fieldList[tabIndex].formConfig.formData,
            'defaultValue',
            that.fieldList[tabIndex].formConfig.formData.defaultValue.filter(
              (item: string) => item !== option.value
            )
          )
        }
      } else if (
        that.fieldList[tabIndex].formConfig.formData.radioOrCheckbox ===
          'radio' ||
        that.fieldList[tabIndex].formConfig.formData.controlType === 'select'
      ) {
        this.$set(
          that.fieldList[tabIndex].formConfig.formData,
          'defaultValue',
          [option.value]
        )
      } else {
        this.$set(
          that.fieldList[tabIndex].formConfig.formData,
          'defaultValue',
          [
            ...that.fieldList[tabIndex].formConfig.formData.defaultValue,
            option.value,
          ]
        )
      }
    },
  },
})
</script>
<style lang="less" scoped>
// .ant-radio-checked .ant-radio-inner {
//   border-color: #6973ff;
// }

// .ant-checkbox-disabled {
//   cursor: disabled;
// }

// .ant-radio-checked::after,
// .ant-checkbox-checked::after {
//   border: 1px solid  #6973ff;
// }

// .ant-checkbox-checked .ant-checkbox-inner {
//   background-color: #6973ff;
//   border-color: #6973ff;
// }

.alr {
  text-align: right;
}

/deep/ .ant-modal-body {
  background: #f8f8f8;
  padding: 0;
}

.content {
  overflow-y: scroll;

  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.5);
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
  }
}

.content-box {
  background: #fff;
  display: block;
  height: 100%;
  // min-height: 600px;

  .data-fields {
    background: #f8f8f8;
    box-sizing: border-box;
    display: block;
    height: 40%;
    overflow: hidden;
    padding: 20px 24px 0;
    transform-origin: 0 0;
    width: 100%;

    &.transition {
      transition: height ease 0.2s;
    }

    * {
      user-select: none;
    }

    .title {
      color: #373b52;
      font-size: 16px;
      letter-spacing: 1px;
      line-height: 16px;
      padding-bottom: 10px;
    }

    .data-chart {
      align-content: center;
      align-items: center;
      box-sizing: border-box;
      display: block;
      height: calc(100% - 36px);
      overflow-x: scroll;
      overflow-y: hidden;
      padding-bottom: 0;
      scroll-behavior: smooth;
      width: 100%;

      &::-webkit-scrollbar {
        height: 6px;
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
      }

      &:hover {
        &::-webkit-scrollbar-thumb {
          background: rgba(144, 147, 153, 0.5);
        }
      }

      .column-list {
        box-sizing: border-box;
        height: 100%;
        min-height: 300px;
        min-width: 100%;
        width: auto;
      }

      .column-item {
        background: #fff;
        border: 1px solid #d9d9d9;
        border-radius: 8px;
        box-sizing: border-box;
        display: inline-block;
        height: 100%;
        margin-right: 10px;
        padding: 12px 14px;
        width: 190px;
      }
    }
  }

  .controller-setting {
    height: 60%;
    overflow: hidden;
    position: relative;
    transform-origin: 0 100%;

    &.transition {
      transition: height ease 0.2s;
    }

    * {
      user-select: none;
    }

    /deep/ .ant-tabs {
      height: 100%;
      width: 100%;
    }

    /deep/ .ant-tabs-top-bar {
      background: #ededf4;
      height: 32px !important;
      padding: 4px 16px 0;

      .ant-tabs-ink-bar-animated {
        display: none !important;
      }

      .ant-tabs-nav-wrap {
        margin-bottom: 0;
      }

      .ant-tabs-tab {
        &.ant-tabs-tab-active {
          background: #fff;

          .tab-title-real {
            color: #373b52;
          }
        }

        .tab-title-real {
          color: #999;
          font-size: 14px;
          height: 28px;
          letter-spacing: 1px;
          padding: 0 12px;
          width: 100%;
        }
      }
    }

    /deep/ .ant-tabs-nav {
      height: 28px;
      user-select: none;

      .ant-tabs-tab {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        color: #4a4a4a;
        font-size: 14px;
        height: 28px;
        letter-spacing: 0;
        line-height: 28px;
        margin-left: 8px;
        margin-right: 0;
        min-width: 120px;
        padding: 0;
        position: relative;
        text-align: center;

        .before,
        .after {
          bottom: -1px;
          fill: #fff;
          position: absolute;
          stroke: transparent;
          z-index: 10;
        }

        .before {
          left: -8px;
        }

        .after {
          right: -8px;
        }
      }

      .ant-tabs-tab + .ant-tabs-tab {
        margin-left: 4px;
      }
    }

    /deep/ .ant-tabs-tab-prev,
    /deep/ .ant-tabs-tab-next {
      height: 28px;
    }

    /deep/ .ant-form-item {
      display: inline-block;
      width: 320px;

      .ant-form-item-label label {
        color: #373b52;
        font-size: 14px;
        letter-spacing: 1px;
      }
    }
  }
}

.option-box {
  box-sizing: border-box;
  margin-top: 16px;
  padding: 0 24px;
  width: 100%;

  .option-list {
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 10px 10px;

    .ant-radio,
    .ant-checkbox {
      transform: scale(0.88) translateY(-1px);
      transform-origin: center center;

      * {
        transform-origin: center center;
      }
    }
  }

  .option-item {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    box-sizing: border-box;
    color: #5d637e;
    cursor: pointer;
    display: block;
    font-size: 12px;
    height: 22px;
    letter-spacing: 1.12px;
    margin-right: 8px;
    margin-top: 10px;
    overflow: hidden;
    padding: 2px 8px 0;
    padding-right: 20px;
    position: relative;
    text-overflow: ellipsis;
    width: 120px;

    &.editor {
      border-color: #6973ff88;
      color: #6973ff;
      padding-top: 1px;
    }

    .label-text {
      display: inline-block;
      height: 12px;
      line-height: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: calc(100% - 16px);
    }

    .icon-del {
      cursor: pointer;
      display: none;
      float: right;
      position: absolute;
      right: 8px;
      top: 0;
    }

    &:hover {
      .icon-del {
        display: inline;
      }
    }
  }
}

.nofield {
  color: #5d637e;
  font-size: 14px;
  font-weight: 400;
  height: auto;
  letter-spacing: 1px;
  line-height: 20px;
  margin-left: 50%;
  margin-top: 40px;
  text-align: center;
  transform: translateX(-50%);
  width: 150px;

  img {
    height: auto;
    width: 100%;
  }
}

.control-select-box {
  padding: 2px 6px 0;

  /deep/ .comp-range-month,
  /deep/ .comp-range-year {
    width: 400px !important;
  }

  /deep/ .ant-select-selection,
  /deep/ .ant-input-affix-wrapper,
  /deep/ .ant-calendar-picker,
  /deep/ .ant-calendar-picker {
    width: 180px;
  }
}

.association-chart {
  background: #fff;
  overflow: hidden;
  padding: 16px 20px 20px 24px;
  transform-origin: 0 0;
  transition: all ease-in-out 0.3s;

  .title {
    color: #373b52;
    font-size: 14px;
    height: 14px;
    letter-spacing: 1px;
    line-height: 14px;
    margin-top: 10px;
    padding-bottom: 20px;

    .sub {
      color: #5d637e;
      font-size: 12px;
      letter-spacing: 1.12px;
      margin-left: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .data-name {
      color: #373b52;
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 1px;
      line-height: 17px;
    }
  }

  .chart-list {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-height: 240px;
    width: 100%;
  }

  .a-chart-box {
    border: 1px solid #eaeaeb;
    box-sizing: border-box;
    height: 240px;
    margin-bottom: 20px;
    overflow: hidden;
    padding-left: 8px;
    padding-top: 20px;
    position: relative;
    width: 32%;

    .title {
      color: #5d637e;
      display: block;
      font-size: 14px;
      font-weight: 400;
      height: 36px;
      left: 0;
      letter-spacing: 1px;
      line-height: 20px;
      margin: 0;
      padding: 10px 20px 0;
      padding-bottom: 7px;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1000;
    }

    &.is-table {
      padding-left: 0;
    }
  }
}

.handler {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  bottom: 0;
  color: #6973ff;
  display: inline-block;
  font-size: 14px;
  height: 32px;
  left: 50%;
  letter-spacing: 1px;
  line-height: 32px;
  padding: 0 6px;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -6px);
  width: auto;
  z-index: 3000;

  span {
    cursor: pointer;
  }
}

.split-control {
  cursor: ns-resize;
  height: 6px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

/deep/ .ant-tabs-content {
  height: calc(100% - 40px) !important;

  .ant-tabs-tabpane {
    height: calc(100% - 10px) !important;
    overflow: hidden;

    .scroll-box {
      height: 100%;
      overflow-y: scroll;
      width: 100%;

      &::-webkit-scrollbar {
        height: 6px;
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(144, 147, 153, 0.5);
        border-radius: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
      }
    }
  }
}

/deep/ .table-setting-view {
  margin-top: 20px;
}

/deep/ .ant-collapse-header {
  color: #5d637e;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 20px;
}

.warning-box {
  color: rgb(235, 57, 65);

  i {
    margin-right: 0 !important;
  }
}
</style>
